<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone thumbnails演示(cool皮肤/响应式)_素材火</title>

<style>
body { overflow-x: hidden; }
#containingDiv { width: 960px; margin: 0 auto; }
@media screen and (min-width:1200px) {
	#containingDiv { width: 960px; margin: 0 auto; }
}
@media screen and (max-width:767px) {
	#containingDiv { width: 100%; margin: 0 auto; }
}
</style>

<link rel="stylesheet" href="css/allinone_thumbnailsBanner.css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/allinone_thumbnailsBanner.js"></script>
<script src="js/reflection.js" type="text/javascript"></script>

<script>
$(function() {
	$('#allinone_thumbnailsBanner_cool').allinone_thumbnailsBanner({
		skin: 'cool',
		numberOfThumbsPerScreen:7,
		width: 960,
		height: 384,
		thumbsReflection:0,
		responsive:true,
		origthumbsHolderWrapperH:121,
		thumbsWrapperMarginTop:0
	});
});
</script>
</head>

<body>
<h1>allinone thumbnails演示(cool皮肤/响应式)</h1>

<!-- 代码开始 -->
<div id="containingDiv">
	<div id="allinone_thumbnailsBanner_cool" style="display:none;">
		<ul class="allinone_thumbnailsBanner_list">
			<!-- 图片 -->
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2" data-link="http://www.sucaihuo.com/js/249.html" data-target="_blank"><img src="images/cool/02_cool.jpg" alt="" /></li>
		</ul>
		
		<!-- 文字 -->
		<div id="allinone_thumbnailsBanner_photoText1" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement11_cool_responsive" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5" data-fade-start="0" data-delay="0">Up to 5 types of banners</div>
			<div class="allinone_thumbnailsBanner_text_line textElement12_cool_responsive" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">Each with <a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank">multiple</a> SKINS</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText2" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement21_cool_responsive" data-initial-left="460" data-initial-top="60" data-final-left="460" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects<br />
				for images</div>
			<div class="allinone_thumbnailsBanner_text_line textElement22_cool_responsive" data-initial-left="460" data-initial-top="145" data-final-left="460" data-final-top="145" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition<br />
				for each image</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText3" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement31_cool_responsive" data-initial-left="480" data-initial-top="60" data-final-left="50" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
			<div class="allinone_thumbnailsBanner_text_line textElement32_cool_responsive" data-initial-left="0" data-initial-top="85" data-final-left="50" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
			<div class="allinone_thumbnailsBanner_text_line textElement33_cool_responsive" data-initial-left="50" data-initial-top="250" data-final-left="50" data-final-top="123" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText4" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement41_cool_responsive" data-initial-left="50" data-initial-top="0" data-final-left="50" data-final-top="260" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
			<div class="allinone_thumbnailsBanner_text_line textElement42_cool_responsive" data-initial-left="53" data-initial-top="384" data-final-left="53" data-final-top="240" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText5" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement51_cool_responsive" data-initial-left="130" data-initial-top="52" data-final-left="430" data-final-top="52" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank">Cool Title Right Here</a></div>
			<div class="allinone_thumbnailsBanner_text_line textElement52_cool_responsive" data-initial-left="430" data-initial-top="300" data-final-left="430" data-final-top="95" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, <a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt. </div>
		</div>
	</div>
</div>
<!-- 代码结束 -->









<!-- 以下是统计和广告，与演示无关，不必理会 -->
<p style="margin-top: 140px; text-align: center; color: #f60;">你可以在不同的设备中或改变窗口大小查看本演示</p>
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:30px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>


</body>
</html>